<template>
    <div class="mi_dialog">
        <el-dialog v-bind="$attrs"
                   destroy-on-close
                   :close-on-click-modal="false"
                   :width="width_c"

        >
            <el-scrollbar max-height="80vh">
                <slot></slot>
            </el-scrollbar>

            <template #header v-if="$slots['header']">
                <slot name="header"></slot>
            </template>

            <template #footer v-if="$slots['footer']">
                <slot name="footer"></slot>
            </template>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {computed, onMounted} from "vue";

    const props = withDefaults(defineProps<{
        width?: string | number
    }>(), {
        width: 900
    })

    const width_c = computed(() => {

        let width = props.width

        if (window.innerWidth<900 && props.width>900){
            width = '90%'
        }
        return width

    })

</script>

<style scoped lang="scss">
.mi_dialog{
    :deep(.el-dialog__body){
        padding: var(--el-dialog-padding-primary);
    }
    :deep(.el-dialog){
        margin: 15vh auto auto;
    }
}
</style>
